<script setup lang='ts'>
import type { UploadProps } from 'element-plus'

const form = ref({
    date1: '',
    date2: '',
    delivery: false,
    desc: '',
    name: '',
    region: '',
    resource: '',
    type: [],
})
const rules = ref(
    {
        name: [
            { message: 'Please input Activity name', required: true, trigger: 'blur' },
        ],
    },
)
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile,
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    }
    else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}
function onSubmit() {
    console.log('submit!')
}
function goback() {
    console.log('🚀 ~ goback ~ goback:', goback)
}
</script>

<template>
    <div class="bg-#fff p-30">
        <span class="btn-medium mb-20 inline-block"
              @click="goback"
        >
            返回列表
        </span>

        <el-form :rules="rules"
                 class="mb-20 px-30 pb-30 pt-20"
                 :model="form"
                 label-width="100%"
                 label-position="top"
        >
            <div class="mb-20 font-size-20 text-#1D2129 fw-600">
                企业注册信息
            </div>

            <el-row :gutter="50">
                <el-col :span="8">
                    <el-form-item label="企业号">
                        <el-input v-model="form.name"
                                  disabled
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="50">
                <el-col :span="8">
                    <el-form-item label="企业名称"
                                  prop="name"
                    >
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="企业简称"
                                  prop="name"
                    >
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="50">
                <el-col :span="8">
                    <el-form-item label="统一社会信用代码"
                                  prop="name"
                    >
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="企业联系电话"
                                  prop="name"
                    >
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="50">
                <el-col :span="8">
                    <el-form-item label="企业级别"
                                  prop="name"
                    >
                        <el-radio-group v-model="form.resource">
                            <el-radio label="Sponsor" />

                            <el-radio label="Venue" />
                        </el-radio-group>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="所属上级企业"
                                  prop="name"
                    >
                        <el-select v-model="form.region">
                            <el-option label="Zone one"
                                       value="shanghai"
                            />

                            <el-option label="Zone two"
                                       value="beijing"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="50">
                <el-col :span="8">
                    <el-form-item label="业务类别"
                                  prop="name"
                    >
                        <el-select v-model="form.region">
                            <el-option label="Zone one"
                                       value="shanghai"
                            />

                            <el-option label="Zone two"
                                       value="beijing"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="合作类型"
                                  prop="name"
                    >
                        <el-select v-model="form.region">
                            <el-option label="Zone one"
                                       value="shanghai"
                            />

                            <el-option label="Zone two"
                                       value="beijing"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="50">
                <el-col :span="8">
                    <el-form-item label="注册日期"
                                  prop="name"
                    >
                        <el-date-picker v-model="form.date1"
                                        type="date"
                                        size="default"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="50">
                <el-col :span="8">
                    <el-form-item label="企业法人"
                                  prop="name"
                    >
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="法人证件号码"
                                  prop="name"
                    >
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="50">
                <el-col :span="8">
                    <el-form-item label="营业执照"
                                  prop="name"
                    >
                        <el-upload class="avatar-uploader"
                                   action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload"
                        >
                            <el-image v-if="imageUrl"
                                      :src="imageUrl"
                                      class="avatar"
                            />

                            <el-image v-else
                                      image-class="w-120 h-120 "
                                      src="/assets/imgs/upload.svg"
                                      alt="Image"
                            />
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="50">
                <el-col :span="8">
                    <el-form-item label="企业法人身份证(正面)"
                                  prop="name"
                    >
                        <el-upload class="avatar-uploader"
                                   action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="imageUrl"
                                 :src="imageUrl"
                                 class="avatar"
                            >

                            <el-image v-else
                                      image-class="w-120 h-120 "
                                      src="/assets/imgs/upload.svg"
                                      alt="Image"
                            />
                        </el-upload>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="企业法人身份证(反面)"
                                  prop="name"
                    >
                        <el-upload class="avatar-uploader"
                                   action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="imageUrl"
                                 :src="imageUrl"
                                 class="avatar"
                            >

                            <el-image v-else
                                      image-class="w-120 h-120 "
                                      src="/assets/imgs/upload.svg"
                                      alt="Image"
                            />
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="50">
                <el-col :span="16">
                    <el-form-item label="企业注册地址"
                                  prop="name"
                    >
                        <el-select v-model="form.region"
                                   class="mr-10 !w-100"
                        >
                            <el-option label="Zone one"
                                       value="shanghai"
                            />

                            <el-option label="Zone two"
                                       value="beijing"
                            />
                        </el-select>

                        <el-select v-model="form.region"
                                   class="mr-10 !w-100"
                        >
                            <el-option label="Zone one"
                                       value="shanghai"
                            />

                            <el-option label="Zone two"
                                       value="beijing"
                            />
                        </el-select>

                        <el-select v-model="form.region"
                                   class="mr-10 !w-100"
                        >
                            <el-option label="Zone one"
                                       value="shanghai"
                            />

                            <el-option label="Zone two"
                                       value="beijing"
                            />
                        </el-select>

                        <el-input v-model="form.name"
                                  class="!flex-1"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="mb-20 font-size-20 text-#1D2129 fw-600">
                企业注册信息
            </div>

            <el-row :gutter="50">
                <el-col :span="8">
                    <el-form-item label="企业管理员账号"
                                  prop="name"
                    >
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="姓名"
                                  prop="name"
                    >
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="身份证号"
                                  prop="name"
                    >
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="50">
                <el-col :span="8">
                    <el-form-item label="手机号"
                                  prop="name"
                    >
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="邮箱"
                                  prop="name"
                    >
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-button type="danger"
                       size="large"
                       @click="onSubmit"
            >
                保存
            </el-button>

            <el-button size="large">
                取消
            </el-button>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>
.el-form-item {
    flex-direction: column;
}

:deep(.el-form-item__label) {
    font-size: 16px;
    line-height: 22px;
    color: #1d2129;
}

:deep(.el-date-editor) {
    width: 100%;
}

.btn-medium {
    padding: 5px 16px;
    border-radius: 3px;
    border: 1px solid #c9cdd4;
    font-family: 'PingFang SC';
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: center;
    cursor: pointer;
}
</style>
